<template>
  <div class="trisolaris-404">
    <!-- 星空背景 -->
    <div class="stars"></div>
    <div class="stars2"></div>
    <div class="stars3"></div>

    <!-- 三体星系动画 -->
    <div class="solar-system">
      <div class="trisolaris-sun"></div>
      <div class="planet-orbit orbit-1">
        <div class="planet planet-1"></div>
      </div>
      <div class="planet-orbit orbit-2">
        <div class="planet planet-2"></div>
      </div>
      <div class="planet-orbit orbit-3">
        <div class="planet planet-3"></div>
      </div>
    </div>

    <!-- 主要内容 -->
    <div class="content">
      <div class="error-code">
        <span class="code-digit">4</span>
        <div class="proton unfolded">
          <div class="proton-surface"></div>
        </div>
        <span class="code-digit">4</span>
      </div>

      <h1 class="title">页面已脱水</h1>
      <p class="subtitle">文明 <span class="blink">[ERROR_404]</span> 不存在于当前维度</p>

      <div class="message">
        <p>「水滴」已抵达，当前页面无法被解析</p>
        <p>建议返回安全坐标或联系执剑人</p>
      </div>

      <div class="actions">
        <router-link to="/" class="btn primary">
          <span class="btn-icon">🌐</span>
          返回主基地
        </router-link>
        <button @click="reload" class="btn secondary">
          <span class="btn-icon">🔄</span>
          维度重启
        </button>
      </div>

      <!-- 智子监控提示 -->
      <div class="proton-monitor">
        <div class="monitor-text">智子监控中: 页面状态 [LOST]</div>
        <div class="signal">
          <span class="signal-bar"></span>
          <span class="signal-bar"></span>
          <span class="signal-bar"></span>
          <span class="signal-bar"></span>
        </div>
      </div>
    </div>

    <!-- 底部三体文字 -->
    <div class="trisolaris-text">
      <div class="alien-text">不要回答！不要回答！不要回答！</div>
      <div class="translation">[警告: 未知文明信号]</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const reload = () => {
  window.location.reload()
}
</script>

<style scoped>
.trisolaris-404 {
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0e29 0%, #1a1f4b 50%, #0a0e29 100%);
  color: #e0e0ff;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
  overflow: hidden;
  position: relative;
}

/* 星空背景 */
.stars, .stars2, .stars3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.stars { background: transparent url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="30" r="0.5" fill="white" opacity="0.8"/><circle cx="80" cy="40" r="0.3" fill="white" opacity="0.6"/><circle cx="40" cy="70" r="0.4" fill="white" opacity="0.7"/><circle cx="60" cy="20" r="0.2" fill="white" opacity="0.5"/></svg>') repeat; animation: twinkle 8s ease-in-out infinite; }
.stars2 { background: transparent url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="10" cy="60" r="0.3" fill="white" opacity="0.5"/><circle cx="90" cy="30" r="0.4" fill="white" opacity="0.6"/><circle cx="70" cy="80" r="0.2" fill="white" opacity="0.4"/></svg>') repeat; animation: twinkle 12s ease-in-out infinite reverse; }
.stars3 { background: transparent url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="30" cy="10" r="0.2" fill="white" opacity="0.3"/><circle cx="50" cy="50" r="0.3" fill="white" opacity="0.4"/><circle cx="90" cy="90" r="0.1" fill="white" opacity="0.3"/></svg>') repeat; animation: twinkle 15s ease-in-out infinite; }

@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* 三体星系 */
.solar-system {
  position: absolute;
  top: 20%;
  right: 10%;
  width: 200px;
  height: 200px;
}

.trisolaris-sun {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, #ff6b35 0%, #ff3b1d 50%, #c41c00 100%);
  border-radius: 50%;
  box-shadow: 0 0 30px #ff6b35, 0 0 60px #ff3b1d;
  animation: sun-pulse 4s ease-in-out infinite;
}

@keyframes sun-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.1); }
}

.planet-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.orbit-1 { width: 80px; height: 80px; animation: orbit 20s linear infinite; }
.orbit-2 { width: 120px; height: 120px; animation: orbit 15s linear infinite reverse; }
.orbit-3 { width: 160px; height: 160px; animation: orbit 25s linear infinite; }

.planet {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}

.planet-1 { width: 12px; height: 12px; background: #4fc3f7; box-shadow: 0 0 10px #4fc3f7; }
.planet-2 { width: 16px; height: 16px; background: #81c784; box-shadow: 0 0 12px #81c784; }
.planet-3 { width: 14px; height: 14px; background: #ba68c8; box-shadow: 0 0 10px #ba68c8; }

@keyframes orbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 主要内容 */
.content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 80px 20px;
  max-width: 800px;
  margin: 0 auto;
}

.error-code {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  position: relative;
}

.code-digit {
  font-size: 120px;
  font-weight: 900;
  color: transparent;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 30px rgba(102, 126, 234, 0.5);
}

/* 智子展开动画 */
.proton {
  width: 80px;
  height: 80px;
  margin: 0 30px;
  position: relative;
}

.proton-surface {
  width: 100%;
  height: 100%;
  background: conic-gradient(from 0deg, transparent, #00ffff, transparent);
  border-radius: 50%;
  animation: proton-rotate 3s linear infinite;
  filter: blur(1px);
}

.proton.unfolded .proton-surface {
  animation: proton-unfold 2s ease-in-out infinite;
}

@keyframes proton-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes proton-unfold {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.7; }
  50% { transform: scale(1.2) rotate(180deg); opacity: 1; }
}

.title {
  font-size: 48px;
  font-weight: 300;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #00ffff 0%, #ff00ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
}

.subtitle {
  font-size: 20px;
  margin-bottom: 40px;
  color: #b0b0ff;
}

.blink {
  animation: blink 2s step-start infinite;
  color: #ff5555;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.message {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 30px;
  margin: 40px 0;
  backdrop-filter: blur(10px);
}

.message p {
  margin: 10px 0;
  font-size: 18px;
  color: #d0d0ff;
}

.actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin: 40px 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.btn:hover::before {
  left: 100%;
}

.btn.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #e0e0ff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* 智子监控 */
.proton-monitor {
  margin-top: 50px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  border: 1px solid rgba(0, 255, 255, 0.3);
}

.monitor-text {
  font-family: 'Courier New', monospace;
  color: #00ffff;
  margin-bottom: 10px;
}

.signal {
  display: flex;
  gap: 5px;
  justify-content: center;
}

.signal-bar {
  width: 4px;
  height: 20px;
  background: #00ffff;
  animation: signal-wave 1.5s ease-in-out infinite;
}

.signal-bar:nth-child(2) { animation-delay: 0.1s; }
.signal-bar:nth-child(3) { animation-delay: 0.2s; }
.signal-bar:nth-child(4) { animation-delay: 0.3s; }

@keyframes signal-wave {
  0%, 100% { transform: scaleY(0.3); opacity: 0.3; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* 三体文字 */
.trisolaris-text {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 100%;
  text-align: center;
  opacity: 0.7;
}

.alien-text {
  font-family: 'Courier New', monospace;
  color: #ff5555;
  font-size: 14px;
  margin-bottom: 5px;
}

.translation {
  font-size: 12px;
  color: #8888ff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .error-code {
    flex-direction: column;
    gap: 20px;
  }

  .code-digit {
    font-size: 80px;
  }

  .title {
    font-size: 36px;
  }

  .actions {
    flex-direction: column;
    align-items: center;
  }

  .solar-system {
    display: none;
  }
}
</style>